<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="http://www.softwhy.com/" />
    <title>2021/8.13</title>
    <style type="text/css">
      #myheart {
        position: relative;
        width: 300px;
        height: 440px;
      }
      #myheart:before,
      #myheart:after {
        position: absolute;
        left: 100px;
        background: red;
        height: 320px;
        width: 200px;
        content: '';
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
      }
      #myheart:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
      }
      @keyframes heart {
        0% {
          -webkit-transform: scale(1);
        }
        50% {
          -webkit-transform: scale(0.8);
        }
        100% {
          -webkit-transform: scale(1);
        }
      }

      .myheart {
        position: absolute;
        top: 40%;
        left: 40%;
        animation: heart 1.5s linear infinite;
      }
    </style>
  </head>
  <body>
    <div class="myheart">
      <div id="myheart"></div>
    </div>
  </body>
</html>
